<template>
  <div class="management-wrap">
    <el-row>
      <el-col :span="4">
       <div class="clearfix" style="padding: 0 10px 10px;">
        <el-button class="l" size="small" type="primary" @click="addCategoryTitle">添加分类</el-button>
        <el-button class="r" size="small" type="primary" @click="editCategoryType = true">编辑分类</el-button>
       </div>
        <el-menu :default-active="''+categoryData[0].index" class="el-menu-vertical-demo">
          <el-menu-item v-for="(item,index) in categoryData" :key="index" :index="''+index" @click="getCategoryData($event)">
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
         <div class="clearfix">
            <el-button size="small" type="primary" icon="el-icon-circle-plus" @click="addGoodsType = true">添加商品</el-button>
            <el-button size="small" icon="el-icon-refresh" @click="refresh">刷新</el-button>
            <div class="r search">
              <el-input size="small" placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
          </div>
         </div>
      <el-table
        :data="goodsData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="img"
          label="商品图片"
          width="80">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.img"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="商品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="stock"
          label="库存"
          width="180">
        </el-table-column>
        <el-table-column
          prop="sell"
          label="售量"
          width="180"
          >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
          <template slot-scope="scope">
            <el-link v-if="scope.row.status == 0" type="info">下架</el-link>
            <el-link v-if="scope.row.status == 1" type="success">售卖中</el-link>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="140">
          <template slot-scope="scope">
            <el-link v-if="scope.row.status == 1" type="danger">下架 &nbsp;</el-link>
            <el-link v-if="scope.row.status == 0" type="primary">上架 &nbsp;</el-link>
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button class="t-delete-1" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;padding-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000">
        </el-pagination>

      </div>

      </el-col>
    </el-row>
    <!-- S 添加分类 -->
      <el-dialog
      title="添加新分类"
      :visible.sync="addCategoryType"
      width="30%">
      <el-form ref="addCategoryForm" :model="addCategoryForm" label-width="130px" size="mini" style="width: 70%">
        <el-form-item label="请输入分类名称">
              <el-input v-model="addCategoryForm.title"></el-input>
            </el-form-item>
              <el-form-item>
          <el-button type="primary" @click="addCategoryFormSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
       
      </el-dialog>

    <!-- E 添加分类 -->

    <!-- S 编辑分类 -->
       <el-dialog
        title="编辑分类"
        :visible.sync="editCategoryType"
        width="30%"
        >
        
      </el-dialog>


    <!-- E 编辑分类 -->

    <!-- S 添加商品 -->
    <el-dialog
      title="添加新商品"
      :visible.sync="addGoodsType"
      width="40%">
      <el-form ref="addGoodsForm" :model="addGoodsForm" label-width="150px" size="mini" style="width: 70%">
        <el-form-item label="商品图片">
          <el-input v-model="addGoodsForm.image"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="addGoodsForm.name"></el-input>
        </el-form-item>
        <el-form-item label="请输入库存">
          <el-input v-model="addGoodsForm.stock"></el-input>
        </el-form-item>
        <el-form-item label="请输入销售量">
          <el-input v-model="addGoodsForm.sell"></el-input>
        </el-form-item>
        <el-form-item label="是否上架">
          <el-switch v-model="addGoodsForm.status"></el-switch>
        </el-form-item>
          <el-form-item>
          <el-button type="primary" @click="addGoodsSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- E 添加商品 -->
  </div>
</template>

<script>
export default {
  name: 'Management',
  data(){
    return {
      addCategoryType: false,
      editCategoryType: false,
      addGoodsType: false,
      addCategoryForm:{
        title: ''
      },
      addGoodsForm:{
        image:'',
        name:'',
        stock:'',
        sell:'',
        status:''
      },
      storeInfo:{},
      activeName:'second',
      categoryData:[
        {index:0,title:"分类1"},
        {index:1,title:"分类2"},
        {index:2,title:"分类3"},
      ],
      goodsData:[
        {id:1,img:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',name:'商品名称',stock:665,sell:221,status:1},
        {id:2,img:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',name:'商品名称',stock:665,sell:221,status:1},
        {id:3,img:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',name:'商品名称',stock:665,sell:221,status:0},
        {id:4,img:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',name:'商品名称',stock:665,sell:221,status:1},
        {id:5,img:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',name:'商品名称',stock:665,sell:221,status:1},
        {id:6,img:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',name:'商品名称',stock:665,sell:221,status:0},
        {id:7,img:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',name:'商品名称',stock:665,sell:221,status:0}
      ],
    }
  },
  methods:{
    categoryEdit(){
      
    },
    getCategoryData(event){  // 点击分类获取数据
      console.log(event)
    },
    addCategoryTitle(){
      this.addCategoryType = true;
    },
    addGoodsSubmit(){

    },
    addCategoryFormSubmit(){

    },
    editCategoryType:{

    },
    refresh(){
      console.log('刷新')
    }
  },
  created(){
    this.storeInfo = this.$route.params.info;
    console.log(this.storeInfo)
  },
}
</script>
<style scoped>

</style>
